<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>用户地址添加</title>
</head>
<body>
<form id="saveCustomerAddress" action="/customer/address/save" method="post">
    用户ID：<input th:name="customerId"/><br/>
    收件人：<input th:name="consigneeName"/><br/>
    选择地址:
    <div>
        <!--省-->
        <select id="province" th:name="provinceId" onchange="changeProvince()">
            <option value="">-- 请选择省 --</option>
        </select>&nbsp;&nbsp;&nbsp;
        <!-- 市 -->
        <select id="city" th:name="cityId" onchange="changeCity()">
            <option value="">-- 请选择市 --</option>
        </select>&nbsp;&nbsp;&nbsp;
        <!-- 县(区) -->
        <select id="district" th:name="countyId" onchange="getCounty()">
            <option value="">-- 请选择县(区) --</option>
        </select>
        <!-- 街道 -->
        <select id="town" th:name="townId">
            <option value="">-- 请选择街道 --</option>
        </select>
    </div>
    邮箱：<input th:name="consigneeEmail"/><br/>
    收件详细地址：<input th:name="consigneeDetail"/><br/>
    收件人手机号：<input th:name="consigneeMobile"/><br/>
    收件地址别名：<input th:name="consigneeAlias"/><br/>
    邮编：<input th:name="consigneePostcode"/><br/>
    是否默认：
    是：<input type="radio" th:name="whetherDefault" value="1" />
    否：<input type="radio" th:name="whetherDefault" checked="checked" value="0"/><br/>
    版本:<input th:name="version"/><br/>
    <button>提交</button>
</form>

</body>

<script type="text/javascript" src="/static/js/jquery.min.js" th:src="@{/static/js/jquery.min.js}"></script>
<script>
    //页面在加载完毕事件---->onload
    $(function () {
        //发送请求获取所有的省份，
        $.ajax({
            type:"GET",//type:请求方式
            url:"http://127.0.0.1:9000/address/reload/list",//请求的uri连接地址
            headers: {
                version: "2.0",
            },
            data: {
                "type": "PROVINCE",
                "parent":0
            },
            // provinceList 封装后台返回的JSON数据
            //success:请求成功的回调函数
            success:function (result) {
                if (result.code == 0) {
                    var data = result.data;
                    //provinceList 是一个集合，获取集合数据，
                    //循环生成option标签，value属性值为城市名，显示的数据也是城市名
                    for (var i = 0; i < data.length; i++) {
                        /**
                        //返回的是List集合通过下标获取数据。
                        //如果返回的是map，根据key获取数据
                        //返回的city对象。根据city.属性名来获取数据
                        var option = $("<option></option>").text(data[i].name);
                        //生成value属性
                        option.attr("value", data[i].name);
                        //将option添加到select标签中
                        $("#province").append(option);
                         */
                        /*循环添加option*/
                        $("#province:last").append("<option value=" + data[i].id + ">" + data[i].name + "</option>")
                            //.attr("value",data[i].id)
                        //生成value属性
                    }
                } else {
                    
                }
            }
        })
    })

    /**
     * 作用：填充对应省份下的城市
     * 思路：
     *      1、根据provinceZh将leaderZh取出
     *      2、并且对leaderZh去重
     *      3、清空city下拉框
     *      4、将新的数据填充进去
     */

    /**
     * 作用：根据省 获取 所有市
     * */
    function changeProvince() {
        //获取选中的省份的名字
        var parent = $("#province").val();
        //alert("省份编号 ==》"+parent)
        $.ajax({
            type: "GET",
            url: "http://127.0.0.1:9000/address/reload/list",
            headers: {
                version: "2.0",
            },
            data: {
                "type": "CITY",
                "parent":parent
            },
            success:function (result) {
                if (result.code == 0){
                    //清空城市的下拉框,这串代码就是替换select标签中内容
                    $("#city").html("<option value=''>-- 请选择市 --</option>")
                    //清空区的下拉框
                    $("#district").html("<option value=''>-- 请选择县(区) --</option>")
                    $("#town").html("<option value=''>-- 请选择县(区) --</option>")
                    var data = result.data;
                    for(var i = 0;i < data.length;i++){
                        /**
                        var option = $("<option></option>").text(cities[i]);
                        //生成value属性
                        option.attr("value",cities[i]);
                        //将option添加到select标签中
                        $("#city").append(option);
                         */
                        $("#city:last").append("<option value=" + data[i].id + ">" + data[i].name + "</option>")
                            //.attr("value",data[i].id)
                    }
                } else {
                    
                }
                
                
            }
        })
    }
    
    
    /**
     * 作用：根据市 获取 所有区和县
     * */
    function changeCity() {
        //2、获取城市
        var parent = $("#city").val();
        //alert("城市编号===>"+parent)
        $.ajax({
            type: "GET",
            url: "http://127.0.0.1:9000/address/reload/list",
            headers: {
                version: "2.0",
            },
            data: {
                "type": "DISTRICT",
                "parent": parent
            },
            success:function (result) {
                if (result.code == 0) {
                    //清空城市的下拉框,这串代码就是替换select标签中内容
                    $("#district").html("<option value=''>-- 请选择县(区) --</option>")
                    $("#town").html("<option value=''>-- 请选择县(区) --</option>")
                    //循环
                    var data = result.data;
                    for (var i = 0; i < data.length; i++) {
                        /**
                        //text为要显示在页面上的数据，显示名字
                        var option = $("<option></option>").text(area[i].cityZh);
                        //封装value属性值，value属性是传递到后台的数据需要是id
                        option.attr("value", area[i].id);
                        $("#district").append(option);
                         */
                        $("#district:last").append("<option value=" + data[i].id + ">" + data[i].name + "</option>")
                            //.attr("value",data[i].id)
                    }
                }
            }
        })
    }
    
    /**
     * 作用：根据区县 所有获取街道
     * */
    function getCounty() {
        //2、获取城市
        var parent = $("#district").val();
        //alert("区县编号===>"+parent)
        $.ajax({
            type: "GET",
            url: "http://127.0.0.1:9000/address/reload/list",
            headers: {
                version: "2.0",
            },
            data: {
                "type": "TOWN",
                "parent": parent
            },
            success:function (result) {
                if (result.code == 0) {
                    $("#town").html("<option value=''>-- 请选择县(区) --</option>")
                    //循环
                    var data = result.data;
                    for (var i = 0; i < data.length; i++) {
                        /**
                         //text为要显示在页面上的数据，显示名字
                         var option = $("<option></option>").text(area[i].cityZh);
                         //封装value属性值，value属性是传递到后台的数据需要是id
                         option.attr("value", area[i].id);
                         $("#district").append(option);
                         */
                        $("#town:last").append("<option value=" + data[i].id + ">" + data[i].name + "</option>")
                    }
                }
            }
        })
    }

    /**
     * form 表单提交 自定义 请求头
     */
    function ajaxSubmit() {
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "http://127.0.0.1:9000/customer/address/save",
            headers: {
                version: "2.0",
            },
            data: $('#saveCustomerAddress').serialize(),
            success: function (result) {
                if (result.code == 0) {
                    alert("成功");
                    // 成功后 跳转到 新增页面 / 用户地址列表
                    window.location.href="http://127.0.0.1:9000/customer/address/to/add";
                    //document.write(JSON.stringify(result));
                } else {
                    document.write(JSON.stringify(result));
                }
            },
            error : function() {
                alert("异常！");
            }
        })
    }
</script>
</html>
